<template>
	<div class="nav">
		<el-row style="display: none;">
			<el-col :span="20">
				<div class="grid-content bg-purple">
					<el-badge :value="12" class="item" type="primary">
						<el-popover placement="bottom-end" width="150" trigger="hover">
							<!-- <div class="text item" @click='newMyDiagram'>新建</div> -->
							<div class="text item">
								<a href="javascript:;" @click='importJSON' class="a-upload">
									打开
								</a>
							</div>
							<el-divider></el-divider>
							<div class="text item" @click='saveData'>保存</div>
							<!-- <div class="text item">另存为</div> -->
							<el-button slot="reference" size="small">文件</el-button>
						</el-popover>
					</el-badge>
					<el-badge :value="3" class="item" type="primary">
						<el-button size="small">实例信息</el-button>
					</el-badge>
					<el-badge :value="1" class="item" type="primary">
						<el-button size="small">故障设定</el-button>
					</el-badge>
					<el-badge :value="2" class="item" type="primary">
						<el-button size="small">故障分析</el-button>
					</el-badge>
					<el-badge :value="2" class="item" type="primary">
						<el-button size="small">实验步骤</el-button>
					</el-badge>
					<el-badge :value="2" class="item" type="primary">
						<el-button size="small">帮助</el-button>
					</el-badge>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="grid-content bg-purple-light">
					<div class="icon" @click="heatmapinit">
						<i class="el-icon-orange header-user-con"></i>
					</div>
					<div class="icon" @click="run">
						<i class="el-icon-video-play header-user-con"></i>
					</div>
					<div class="icon" @click="stop">
						<i class="el-icon-video-pause header-user-con"></i>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import FileSaver from 'file-saver'
	export default {
		data() {
			return {
				collapse: false,
				fullscreen: false,
				name: 'linxin',
				message: 2,
				importJSONData: {},
			};
		},
		computed: {},
		methods: {
			heatmapinit() {
				this.$parent.heatmapinit();
			},
			run() {
				this.$parent.run();
			},
			stop() {
				this.$parent.stop();
			},
			newMyDiagram(){
				this.$parent.newMyDiagram();
			},
			saveData() {
				this.$parent.saveData();
			},
			importJSON() {
				this.$parent.importJSON();
			},
			saveData(){
				this.$parent.saveData();
			}
		},
		mounted() {
			if (document.body.clientWidth < 1500) {
				// this.collapseChage();
			}
		}
	};
</script>
<style scoped>
	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 40px;
		font-size: 22px;
		color: #fff;
	}

	.item {
		margin-top: 10px;
		margin-right: 20px;
	}

	.icon {
		height: 40px;
		float: left;
		margin-right: 20px;
		cursor: pointer;
	}

	.header-user-con {
		display: flex;
		height: 40px;
		align-items: center;
		font-size: 36px;
	}

	.text.item {
		cursor: pointer;
		margin-right: 0
	}

	.text.item:hover {
		background-color: #dadada;
	}

	.el-divider--horizontal {
		display: block;
		height: 1px;
		width: 100%;
		margin: 10px 0;
	}

	.a-upload {
		width: 100%;
		height: 19px;
		position: relative;
		color: #606266;
	}

	.a-upload input {
		width: 150px;
		height: 19px;
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0;
		filter: alpha(opacity=0);
		cursor: pointer
	}
</style>
